﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/index.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>
    
</head>

<body>

    <div id="app">
        <!-- 引入头部组件 -->
        <my-header></my-header>

        <!-- 内容：关键字搜索 -->
        <!-- 类解释：navbar-form【导航栏中的表单】 -->
        <div class="navbar-form searchdiv">
            <form action="">
                <!-- 类解释：input-group【输入组】 -->
                <div class="input-group">
                    <!-- 类解释：form-control【表单控件】，自定义类search -->
                    <input type="text" class="form-control search" placeholder="搜索关键字" v-model="keyword" />
                    <!-- 类解释：输入组文本，背景颜色蓝色 -->
                    <a class="input-group-text bg-primary" href="javascript:;" @click="keywordQuery">
                        <i class="bi bi-search"></i>
                    </a>
                </div>
            </form>
        </div>

        <!-- 
            主体内容
            container：设置版心为两端留白
            style="margin-top: 80px;"：设置版心上外边距为60px
        -->
        <main class="container" style="margin-top: 70px;">
            <!-- row：将整个版心设置为一行，开启网格系统 -->
            <div class="row">
                <!-- col-md-8：设置主题内容左半部分为8格
                    col-xs-12：设置主体内容在xs尺寸下占12格
                -->
                <div class="col-md-8 col-xs-12">
                    <!-- 卡片一
                            card：开启卡片
                            mt-3：每个卡片距离上外边距为rem:3
                    -->
                    <div class="card mt-3" v-for="a in articles">
                        <!-- 
                            card-body：指定卡片内容部分
                            d-flex：将卡片内容部分开启弹性布局
                        -->
                        <div class="card-body d-flex">
                            <!-- 
                                card-img-top：设置卡片图片置位顶部
                                card-cover：给卡片图片取一个类名，用于在css文件中设置封面的宽高
                                img-fluid：响应式图片，跟随屏幕大小自动缩放图片比例
                            -->
                            <a :href="'blog-detail.html?' + a.id" >
                                <img :src="a.articlePic" class="card-img-top card-cover img-fluid" alt="...">
                            </a>
                            <!-- 设置封面图片右边内容div
                                    ms-3：距离左边封面3rem
                            -->
                            <div class="ms-3">
                                <!-- 
                                    card-link：指定a标签为卡片链接
                                    text-decoration-none：去掉a标签自带样式
                                -->
                                <a :href="'blog-detail.html?' + a.id" class="card-link text-decoration-none text-primary">
                                    <h5>{{a.articleName}}</h5>
                                </a>
                                <!-- 
                                    card-text：指定为卡片文本
                                    opacity-50：透明度50
                                    style="font-family: Georgia"：指定文本字体格式
                                    &bull;：•的转译字符
                                -->
                                <p style="font-family: Georgia" class="card-text opacity-50">
                                    &bull; {{a.updateTime}}
                                </p>
                                <!-- card-text：指定为卡片文本 -->
                                <p class="card-text">{{a.articleRemark}}</p>
                            </div>
                        </div>
                        <!-- 卡片中间的线使用hr实现 -->
                        <hr class="mx-4 my-0">
                        <!-- 
                            d-flex：开启卡片底部内容为弹性布局
                            justify-content-between：设置底部内容水平对齐方式
                            align-items-center：设置底部内容垂直对齐方式
                            px-4：让底部内容的内水平边距设置为4rem，这样内容更居中
                            style="height: 60px;"：设置底部内容高度为60px
                        -->
                        <div class="d-flex justify-content-between align-items-center px-4" style="height: 60px;">
                            <div>
                                <i class="bi bi-folder2-open opacity-50"></i>
                                <span class="card-text">{{a.articleTypeName}}</span>
                                <i class="bi bi-tags opacity-50"></i>
                                <span class="card-text">{{a.articleTag}}</span>
                            </div>
                            <a :href="'blog-detail.html?' + a.id" class="card-link btn btn-primary read">阅读全文</a>
                        </div>
                    </div>


                    <!-- 
                        分页部分
                        text-end：设置分页位置靠右
                        overflow-auto：溢出自适应，屏幕缩小后分页栏有水平滚动条
                    -->
                    <div class="text-end my-3 overflow-auto" style="margin-bottom: 50px;">
                        <el-pagination
                                background
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-size="pageSize"
                                layout="total,prev, pager, next, jumper"
                                :total="totals">
                        </el-pagination>
                    </div>
                </div>

                <!-- 侧边栏
                    sidebar：用于使用jQuery引入侧边栏组件
                    col-md-4：此侧边栏站整个网格的4份
                    mb-5：侧边栏距离下面5rem
                    d-none d-sm-block：在xs尺寸下隐藏，适用于手机
                -->
                <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
                    <my-sidebar></my-sidebar>
                </div>
            </div>
        </main>
    </div>

    
    <script>
        /* 必须要挂载分页栏才会起作用 */
        new Vue({
            el: "#app",
            data: {
                // 分页查询数据
                pageSize:3,
                currentPage:1,
                totals:0,
                articles:[],

                // 高级查询数据
                keyword:'',



            },
            methods: {
                getArticles(){
                    let params = {
                        pageSize:this.pageSize,
                        currentPage:this.currentPage,
                        keyword: this.keyword,
                        articleState:1,

                    }
                    this.$http.post("/article",params).then(res => {
                        this.articles = res.data.list;
                        this.totals=res.data.total
                    })
                },
                handleCurrentChange(currentPage){
                    this.currentPage = currentPage;
                    this.getArticles();
                },
                keywordQuery(){
                    this.currentPage = 1;
                    this.getArticles();
                }
            },
            components: {
                // 将组建加入组建库
                'my-header': httpVueLoader('./common/header.vue'),
                'my-sidebar': httpVueLoader('./common/sidebar.vue')
            },
            mounted() {
               this.getArticles();
                
            },
        })
    </script>
</body>

</html>